<template>
  <div v-loading="loading" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
import world from '@/map/world.json'
echarts.registerMap('world', world)
import resize from './mixins/resize'
import { moneyFormat } from '@/utils/ruoyi'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '500px'
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null,
      loading: false
    }
  },
  watch: {
    chartData() {
      this.loading = true
      this.initChart()
      this.loading = false
    }
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    initChart() {
      var data = this.chartData.map(ele => {
        return {
          name: ele.areaName,
          value: ele.amount === null ? 0 : ele.amount,
          areaId: ele.areaId
        }
      })
      var max = -Infinity
      var min = Infinity
      data.forEach(function(itemOpt) {
        if (itemOpt.value > max) {
          max = itemOpt.value
        }
        if (itemOpt.value < min) {
          min = itemOpt.value
        }
      })
      if (min === max) {
        min = min - 1
      }
      // console.log(min, max)

      this.chart = echarts.init(this.$el)
      const geoCoordMap = { '阿富汗': [67.709953, 33.93911], '安哥拉': [17.873887, -11.202692], '阿尔巴尼亚': [20.168331, 41.153332], '阿联酋': [53.847818, 23.424076], '阿根廷': [-63.61667199999999, -38.416097], '亚美尼亚': [45.038189, 40.069099], '法属南半球和南极领地': [69.348557, -49.280366], '澳大利亚': [133.775136, -25.274398], '奥地利': [14.550072, 47.516231], '阿塞拜疆': [47.576927, 40.143105], '布隆迪': [29.918886, -3.373056], '比利时': [4.469936, 50.503887], '贝宁': [2.315834, 9.30769], '布基纳法索': [-1.561593, 12.238333], '孟加拉国': [90.356331, 23.684994], '保加利亚': [25.48583, 42.733883], '巴哈马': [-77.39627999999999, 25.03428], '波斯尼亚和黑塞哥维那': [17.679076, 43.915886], '白俄罗斯': [27.953389, 53.709807], '伯利兹': [-88.49765, 17.189877], '百慕大': [-64.7505, 32.3078], '玻利维亚': [-63.58865299999999, -16.290154], '巴西': [-51.92528, -14.235004], '文莱': [114.727669, 4.535277], '不丹': [90.433601, 27.514162], '博茨瓦纳': [24.684866, -22.328474], '中非共和国': [20.939444, 6.611110999999999], '加拿大': [-106.346771, 56.130366], '瑞士': [8.227511999999999, 46.818188], '智利': [-71.542969, -35.675147], '中国': [104.195397, 35.86166], '象牙海岸': [-5.547079999999999, 7.539988999999999], '喀麦隆': [12.354722, 7.369721999999999], '刚果民主共和国': [21.758664, -4.038333], '刚果共和国': [15.827659, -0.228021], '哥伦比亚': [-74.297333, 4.570868], '哥斯达黎加': [-83.753428, 9.748916999999999], '古巴': [-77.781167, 21.521757], '北塞浦路斯': [33.429859, 35.126413], '塞浦路斯': [33.429859, 35.126413], '捷克共和国': [15.472962, 49.81749199999999], '德国': [10.451526, 51.165691], '吉布提': [42.590275, 11.825138], '丹麦': [9.501785, 56.26392], '多明尼加共和国': [-70.162651, 18.735693], '阿尔及利亚': [1.659626, 28.033886], '厄瓜多尔': [-78.18340599999999, -1.831239], '埃及': [30.802498, 26.820553], '厄立特里亚': [39.782334, 15.179384], '西班牙': [-3.74922, 40.46366700000001], '爱沙尼亚': [25.013607, 58.595272], '埃塞俄比亚': [40.489673, 9.145000000000001], '芬兰': [25.748151, 61.92410999999999], '斐': [178.065032, -17.713371], '福克兰群岛': [-59.523613, -51.796253], '法国': [2.213749, 46.227638], '加蓬': [11.609444, -0.803689], '英国': [-3.435973, 55.378051], '格鲁吉亚': [-82.9000751, 32.1656221], '加纳': [-1.023194, 7.946527], '几内亚': [-9.696645, 9.945587], '冈比亚': [-15.310139, 13.443182], '几内亚比绍': [-15.180413, 11.803749], '赤道几内亚': [10.267895, 1.650801], '希腊': [21.824312, 39.074208], '格陵兰': [-42.604303, 71.706936], '危地马拉': [-90.23075899999999, 15.783471], '法属圭亚那': [-53.125782, 3.933889], '圭亚那': [-58.93018, 4.860416], '洪都拉斯': [-86.241905, 15.199999], '克罗地亚': [15.2, 45.1], '海地': [-72.285215, 18.971187], '匈牙利': [19.503304, 47.162494], '印尼': [113.921327, -0.789275], '印度': [78.96288, 20.593684], '爱尔兰': [-8.24389, 53.41291], '伊朗': [53.688046, 32.427908], '伊拉克': [43.679291, 33.223191], '冰岛': [-19.020835, 64.963051], '以色列': [34.851612, 31.046051], '意大利': [12.56738, 41.87194], '牙买加': [-77.297508, 18.109581], '约旦': [36.238414, 30.585164], '日本': [138.252924, 36.204824], '哈萨克斯坦': [66.923684, 48.019573], '肯尼亚': [37.906193, -0.023559], '吉尔吉斯斯坦': [74.766098, 41.20438], '柬埔寨': [104.990963, 12.565679], '韩国': [127.766922, 35.907757], '科索沃': [20.902977, 42.6026359], '科威特': [47.481766, 29.31166], '老挝': [102.495496, 19.85627], '黎巴嫩': [35.862285, 33.854721], '利比里亚': [-9.429499000000002, 6.428055], '利比亚': [17.228331, 26.3351], '斯里兰卡': [80.77179699999999, 7.873053999999999], '莱索托': [28.233608, -29.609988], '立陶宛': [23.881275, 55.169438], '卢森堡': [6.129582999999999, 49.815273], '拉脱维亚': [24.603189, 56.879635], '摩洛哥': [-7.092619999999999, 31.791702], '摩尔多瓦': [28.369885, 47.411631], '马达加斯加': [46.869107, -18.766947], '墨西哥': [-102.552784, 23.634501], '马其顿': [21.745275, 41.608635], '马里': [-3.996166, 17.570692], '缅甸': [95.956223, 21.913965], '黑山': [19.37439, 42.708678], '蒙古': [103.846656, 46.862496], '莫桑比克': [35.529562, -18.665695], '毛里塔尼亚': [-10.940835, 21.00789], '马拉维': [34.301525, -13.254308], '马来西亚': [101.975766, 4.210484], '纳米比亚': [18.49041, -22.95764], '新喀里多尼亚': [165.618042, -20.904305], '尼日尔': [8.081666, 17.607789], '尼日利亚': [8.675277, 9.081999], '尼加拉瓜': [-85.207229, 12.865416], '荷兰': [5.291265999999999, 52.132633], '挪威': [8.468945999999999, 60.47202399999999], '尼泊尔': [84.12400799999999, 28.394857], '新西兰': [174.885971, -40.900557], '阿曼': [55.923255, 21.512583], '巴基斯坦': [69.34511599999999, 30.375321], '巴拿马': [-80.782127, 8.537981], '秘鲁': [-75.015152, -9.189967], '菲律宾': [121.774017, 12.879721], '巴布亚新几内亚': [143.95555, -6.314992999999999], '波兰': [19.145136, 51.919438], '波多黎各': [-66.590149, 18.220833], '北朝鲜': [127.510093, 40.339852], '葡萄牙': [-8.224454, 39.39987199999999], '巴拉圭': [-58.443832, -23.442503], '卡塔尔': [51.183884, 25.354826], '罗马尼亚': [24.96676, 45.943161], '俄罗斯': [105.318756, 61.52401], '卢旺达': [29.873888, -1.940278], '西撒哈拉': [-12.885834, 24.215527], '沙特阿拉伯': [45.079162, 23.885942], '苏丹': [30.217636, 12.862807], '南苏丹': [31.3069788, 6.876991899999999], '塞内加尔': [-14.452362, 14.497401], '所罗门群岛': [160.156194, -9.64571], '塞拉利昂': [-11.779889, 8.460555], '萨尔瓦多': [-88.89653, 13.794185], '索马里兰': [46.8252838, 9.411743399999999], '索马里': [46.199616, 5.152149], '塞尔维亚共和国': [21.005859, 44.016521], '苏里南': [-56.027783, 3.919305], '斯洛伐克': [19.699024, 48.669026], '斯洛文尼亚': [14.995463, 46.151241], '瑞典': [18.643501, 60.12816100000001], '斯威士兰': [31.465866, -26.522503], '叙利亚': [38.996815, 34.80207499999999], '乍得': [18.732207, 15.454166], '多哥': [0.824782, 8.619543], '泰国': [100.992541, 15.870032], '塔吉克斯坦': [71.276093, 38.861034], '土库曼斯坦': [59.556278, 38.969719], '东帝汶': [125.727539, -8.874217], '特里尼达和多巴哥': [-61.222503, 10.691803], '突尼斯': [9.537499, 33.886917], '土耳其': [35.243322, 38.963745], '坦桑尼亚联合共和国': [34.888822, -6.369028], '乌干达': [32.290275, 1.373333], '乌克兰': [31.16558, 48.379433], '乌拉圭': [-55.765835, -32.522779], '美国': [-95.712891, 37.09024], '乌兹别克斯坦': [64.585262, 41.377491], '委内瑞拉': [-66.58973, 6.42375], '越南': [108.277199, 14.058324], '瓦努阿图': [166.959158, -15.376706], '西岸': [35.3027226, 31.9465703], '也门': [48.516388, 15.552727], '南非': [22.937506, -30.559482], '赞比亚': [27.849332, -13.133897], '津巴布韦': [29.154857, -19.015438] }
      var convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
              areaId: data[i].areaId
            })
          }
        }
        return res
      }

      // 柱状体的顶部
      var scatterData = function(data) {
        return data.map((item) => {
          return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 2]
        })
      }
      // 柱状体的主干
      var lineData = function(data) {
        return data.map((item) => {
          return {
            name: item.name,
            value: item.value,
            coords: [
              geoCoordMap[item.name],
              [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 2]
            ]
          }
        })
      }
      var option = {
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: function(params) {
            var num = isNaN(params.value) ? '-' : moneyFormat(params.value, 'w', 2)
            let html = '<div>' + params.name + '</div>'
            html += '<div>' + window.i18n.t('投资金额') + window.i18n.t('金额单位') + ': ' + num + '</div>'
            return html
          }
        },

        visualMap: {
          show: false,
          min: min,
          max: max,
          calculable: true,
          text: ['High', 'Low'],
          seriesIndex: [0],
          inRange: {
            symbolSize: [5, 5],
            color: ['#E8EBFF', '#D1D7FF']
          }
        },
        geo: {
          map: 'world',
          roam: true,
          zoom: 1.2,
          itemStyle: {
            normal: {
              areaColor: '#fff',
              borderColor: '#E4E4E4',
              shadowColor: '#BCC6FF',
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            emphasis: {
              areaColor: '#FDC72F'
            }
          }

        },
        toolbox: {
          feature: {
            saveAsImage: {
              name: this.$t('项目地域分布')
            }
          }
        },
        series: [
          {
            type: 'map',
            map: 'world',
            zoom: 1.2,
            // geoIndex: 0,
            // aspectScale: 1, // 长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
                normal: {
                    areaColor: '#fff',
                    borderColor: '#E4E4E4',
                    borderWidth: 1
                },
                emphasis: {
                  show: false,
                  areaColor: null
                }
            },
            roam: true,
            animation: false,
            data: data
          },
          // 柱状体的主干
          {
            type: 'lines',
            zlevel: 5,
            lineStyle: {
                width: 5, // 尾迹线条宽度
                opacity: 1, // 尾迹线条透明度'
                curveness: 0, // 尾迹线条曲直度
                color: '#434eb8'
            },
            label: {
                position: 'top',
                normal: {
                    padding: [10, 10],
                    fontSize: '11px',
                    show: false,
                    formatter(p) {
                      return window.i18n.t(p.name) + '\n' + moneyFormat(p.value, 'w', 2)
                    }
                }
            },
            data: lineData(data)
          },
          // 柱状体的顶部
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            zlevel: 5,
            symbol: 'circle',
            symbolSize: [5, 5],
            itemStyle: {
                color: '#434eb8',
                opacity: 1
            },
            data: scatterData(data)
          },
          // 波浪
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 4,
            symbolSize: [4, 2],
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke',
                period: 10,
                scale: 7,
                number: 4
            },
            itemStyle: {
                normal: {
                    color: '#434eb8'
                }
            },
            data: convertData(data)
          }
        ]
      }
      const that = this
      this.chart.setOption(option)
      // 点击地图查询调了2次方法导致查不到去掉一次
      this.chart.off('click')
      this.chart.on('click', function(ev) {
        if (ev.data && ev.data.areaId) {
          that.$emit('clickHandel', ev.data)
        } else {
          that.$emit('clickHandel', '无')
        }
      })
      this.chart.on('georoam', () => {
        const center = this.chart.getOption().series[0].center
        const zoom = this.chart.getOption().series[0].zoom
        this.chart.setOption({
            geo: [
              {
                  zoom,
                  center,
                  animation: false
              }
            ]
        })
      })
    }
  }
}
</script>

<style scoped></style>
